<template>
	<view>
		<u-popup :show="show" @close="close" mode="center" :closeOnClickOverlay='true' :round='12'
			bgColor='transparent'>
			<view class="warp ptb-24 plr-16 bg-color-white br-4">
				<view class="color font-size-16 text-center font-w-500">参与竞价</view>
				<view class="flex flex-js-sb flex-ai-center mt-16 ptb-14 plr-12 br-12 price-limit item">
					<view class="flex-1 flex font-color-textPrimary color font-size-14">
						我的出价
						<input v-model="price" :auto-focus="autoFocus" class='price-limit-inp mr-8'
							style="color: #B91223;margin-left: auto;text-align: right; width: 200rpx;" type="number" name="" id="" />
						元
					</view>
				</view>
				<view class=" mt-16">
					<view class="flex flex-ai-center">
						<view class="color font-size-12">最高限价</view>
						<view class="font-color-price font-size-12 font-w-bold mr-4">￥{{tradInfo.reprice_limit}}</view>
					</view>
					<view class="flex flex-ai-center mt-16">
						<view class="color font-size-12">最低限价不得低于地板价的{{tradInfo.floor_price && tradInfo.floor_price.price_price_ratio}}%，当前地板价为</view>
						<view class="font-color-price font-size-12 font-w-bold">￥{{tradInfo.reprice_min_limit}}</view>
					</view>
				</view>
				<view class="bg-color-white flex flex-js-sb mt-32">
					<w-button type="dark" shape="circle" :pain="true" :style="{flex: '1',marginRight:'32rpx'}"
						@click="close">取消</w-button>
					<w-button shape="circle" :style="{flex: '1'}" @click="openPay">支付</w-button>
				</view>

			</view>
		</u-popup>
		<u-popup :show='payShow' mode='bottom' :closeOnClickOverlay='true' :round='12' :safeAreaInsetBottom='false'
			bgColor='transparent' @close='confirmClose'>
			<view class="plr-16 pt-16 batch br-t-12">
				<view class="text-center  font-w-600 font-size-16 color flex flex-ai-center flex-js-center">
					<text class="flex-1 ml-12">竞价购买</text>
					<w-icon name="close" size="24" @click="confirmClose"></w-icon>
				</view>

				<view class="font-size-16 color font-w-500 text-center mt-20">￥ <text
						class="font-size-24 font-w-bold">{{price}}</text> </view>
				<view class="mt-20">
					<view class="font-size-16 color font-w-500">支付方式</view>
					<view class="flex flex-js-sb mlr-8 ptb-12" v-for="item in basePayList" :key="item.able"
						style="border-bottom:1px solid rgba(255, 255, 255, 0.2);">
						<view class="flex flex-ai-center">
							<w-icon size="18" :name="item.icon"></w-icon>
							<text class='ml-8'
								:class="item.able&&item.check?'font-color-textPrimary':'font-color-999'">{{handleLang(`${item.name}钱包`)}}</text>
						</view>
						<w-icon v-if="item.able&&item.check" name="checked-icon" size="20"></w-icon>
						<!-- <w-icon v-else name="uncheck-icon" size="20"></w-icon> -->
						<w-button v-if="!item.able" type="colorful" size="mm" shape="circle"
							:disabled="!userInfo.real_name_authentication"
							@click='toOpen(item)'>{{handleLang('去开通')}}</w-button>
					</view>
				</view>
				<w-button class="mt-32" shape="circle" @click='submit'>立即购买</w-button>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		mapState,
		mapActions
	} from 'vuex'
	import {
		basePayList
	} from '@/config/index.js'
	import PayUtil from '@/utils/payUtil.js'
	import {
		createTradOrder
	} from '@/api/trad/index.js'
	export default {
		props: {
			show: {
				type: Boolean,
				default: false
			},
			product: {
				type: Object,
				default () {
					return {

					}
				}
			},
			tradInfo: {
				type: Object,
				default () {
					return {}
				}
			}
		},
		model: {
			prop: "show",
			event: 'change'
		},
		data() {
			return {
				price: '',
				autoFocus: false,
				payShow: false,
				basePayList
			}
		},
		watch: {
			show(value) {
				if (value) this.autoFocus = true
				else this.autoFocus = false
			}
		},
		methods: {
			close() {
				this.$emit('change', false)
			},

			openPay() {
				if (this.price < 1) {
					uni.showToast({
						icon: 'none',
						title: '请填写正确的金额'
					})
					return
				}
				this.close()
				this.payShow = true
			},
			confirmClose() {
				this.payShow = false
				this.$emit('change', true)
			},
			submit() {
				uni.showLoading({
					title: '创建中'
				})
				createTradOrder({
					collection_id: this.product.id,
					pay_way: this.basePayList.find(v => v.check).pay_way,
					price: this.price,
					number: 1
				}).then(res => {
					let {
						order_id,
						order_sn
					} = res.data;
					new PayUtil({
						order_id,
						order_number: order_sn,
						order_type: 11,
						pay_type: 4,
						pay_way: this.basePayList.find(v => v.check).pay_way,
					})
					// uni.navigateTo({
					// 	url:'/pages/order/beg/info?id='+res.data.order_id
					// })
					// console.log(res)
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.warp {
		width: 650rpx;
		box-sizing: border-box;
	}

	.item {
		width: 100%;
		border: 3rpx solid #eee;

		.lable {
			@extend .font-color-999, .font-w-500;
		}
	}

	.color {
		color: #261C0B;
	}

	.batch {
		background: $item-bg-color;
		padding-bottom: calc(14rpx + env(safe-area-inset-bottom));

		.item {
			width: 100%;
			border: 3rpx solid #eee;

			.lable {
				@extend .font-color-999, .font-w-500;
			}
		}

		.price-limit {
			&-inp {
				width: 100rpx;
				@extend .text-center, .mlr-2, .font-w-500, .font-color-main-text;
			}
		}
	}
</style>